<template>
  <div class="discount">
    <div class="discount-header-bg">
      <div class="discount-header">
        <van-icon
          name="arrow-left"
          size=".25rem"
          color="#fff"
          @click="goHome"
        />
        <div class="discount-header-log">
          <img
            src=""
            alt=""
          />
        </div>
      </div>
    </div>
    <div class="discount-banner">
      <div class="discount-update">
        <van-icon name="clock-o" />
        <span class="discount-update-title"
          >已于2021-{{ m }}-{{ d }} 0点 全网更新</span
        >
      </div>
    </div>
    <div class="discount-container">
      <van-tabs
        animated
        sticky
        background="#F6F6F6"
        title-inactive-color="#333"
        title-active-color="#fff"
        @click="onClick"
      >
        <van-tab
          :title="item.title"
          :name="item.id"
          v-for="item in discountNav"
          :key="item.id"
        >
          <MustRoob v-if="item.id === 0" />
          <DiscountList />
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, reactive, toRefs } from "vue";
import { useStore } from "vuex";
import MustRoob from "@/components/DiscountList/MustRoob.vue";
import DiscountList from "@/components/DiscountList/index.vue";
import { useRouter } from "vue-router";
export default defineComponent({
  setup() {
    const date = new Date();

    const m =
      date.getMonth() >= 9 ? date.getMonth() + 1 : "0" + (date.getMonth() + 1);

    const d = date.getDate() >= 9 ? date.getDate() : "0" + date.getDate();

    const state = reactive({
      m,
      d,
    });
    const store = useStore();
    const router = useRouter();
    const getDiscountNav = () => {
      return store.dispatch({
        type: "discount/getDiscountNav",
      });
    };
    const discountNav = computed(() => {
      return store.state.discount.discountNav;
    });

    const getDiscountList = (cId: number) => {
      return store.dispatch({
        type: "discount/getDiscountList",
        cId,
      });
    };

    const onClick = (name: number) => {
      getDiscountList(name);
    };

    const goHome = () => {
      router.push("/home");
    };
    onMounted(() => {
      getDiscountNav();
      getDiscountList(0);
    });

    return {
      discountNav,
      onClick,
      getDiscountList,
      goHome,
      ...toRefs(state),
    };
  },
  components: {
    MustRoob,
    DiscountList,
  },
});
</script>

<style lang="stylus" scoped>
/deep/.van-tabs__content
    background #f6f6f6
/deep/.van-tabs__line
    display none
/deep/.van-tab--active
    background linear-gradient(90deg,#8e00ff,#b20aff)
    height .22rem
    box-shadow 0 0.01rem 0.02rem 0 rgb(138 0 255 / 31%)
    border-radius .12rem
    margin-top .1rem
/deep/.van-sticky--fixed
    top .45rem !important
.discount-header-bg
    height .45rem
    background #8700D7
    position fixed
    background-size cover
    top 0
    width 100%
    z-index 1
    .discount-header
        height .45rem
        display flex
        align-items center
        .discount-header-log
            margin-left 1.1rem
            display flex
            img
                height .18rem
                width .95rem
.discount-banner
    background url("https://img.alicdn.com/imgextra/i2/2053469401/O1CN016BjNN82JJi1L2MPYl_!!2053469401.png")
    width 100%
    height 1.7rem
    overflow hidden
    background-size cover
    .discount-update
            font-size .12rem
            text-align center
            padding 0 .1rem
            height .2rem
            background linear-gradient(1turn,#ff19e0,#ff3bf9)
            box-shadow 0 0.01rem 0.03rem 0 rgb(0 0 0 / 6%)
            border-radius .1rem
            font-size .12rem
            color #fff
            overflow hidden
            line-height .2rem
            width 2rem
            margin 1.2rem auto
.discount-container
    background #F6F6F6
</style>
